<template>
    <div>
        <!-- 表格 -->
        <el-table style="width: 100%;" border>
            <el-table-column type="index" label="序号" width="80px" align="center">
            </el-table-column>
            <el-table-column prop="skuName" label="名称" width="width">
            </el-table-column>
            <el-table-column prop="skuDesc" label="描述" width="width">
            </el-table-column>
            <el-table-column prop="prop" label="默认图片" width="110px">
                <template slot-scope="{row,$index}">
                    <img :src="row.skuDefaultImg" alt="" style="width: 100px;height: 100px;" />
                </template>
            </el-table-column>
            <el-table-column prop="weight" label="重量" width="width">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="width">
            </el-table-column>
            <el-table-column prop="prop" label="操作" width="width">
                <template slot-scope="{row,$index}">
                    <!-- isSale 后端参数 标识 判断是否为上架还是下架 -->
                    <el-button type="success" icon="el-icon-sort-down" size="mini" @click="sale(row)"
                        v-if="row.isSale == 0"></el-button>
                    <el-button type="success" icon="el-icon-sort-up" size="mini" @click="cancel(row)" v-else></el-button>
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click=""></el-button>
                    <el-button type="info" icon="el-icon-info" size="mini" @click=""></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click=""></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <el-pagination style="margin-top: 20px;text-align: center;" :current-page="1" :total="total" :page-size="limit"
            :pager-count="7" :page-sizes="[3, 5, 10]" layout="prev,pager,next,jumper,->,total,sizes"
            @size-change="handleSizeChange" @current-change="getSkuList">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: 'sku',
    data() {
        return {
            // 代表当前第几页
            page: 1,
            // 代表当前页面有几条数据
            limit: 10,
            // 存储SKU列表的数据
            records: [],
            // 存储分页器一共展示的数据
            total: 0,
        }
    },
    // 组件挂载完毕
    mounted() {
        // 获取sku列表的函数
        this.getSkuList();
    },
    methods: {
        // 获取 sku列表数据的函数
        async getSkuList(pager = 1) {
            this.page = pager;
            // 解构出默认的参数
            const { page, limit } = this;
            let result = await this.$API.sku.reqSkuList(page, limit);
            if (result.code == 200) {
                this.total = result.data.total;
                this.records = result.data.records;
            }
        },
        handleSizeChange(limit) {
            // 修改参数
            this.limit = limit;
            this.getSkuList();
        },
        // 上架
        async sale(row) {
            let result = this.$API.sku.reqSale(row.id);
            if (result.code == 200) {
                row.isSale = 1;
                this.$message({
                    type: 'success',
                    message: "上架成功"
                })
            }
        },
        // 下架
        async cancel(row) {
            let result = this.$API.sku.reqCancel(row.id);
            if (result.code == 200) {
                row.isSale = 0;
                this.$message({
                    type: 'success',
                    message: "下架成功"
                })
            }
        }
    }
}

</script>

<style lang="scss" scoped></style>